<template>
    <div class="time-select">
        <a-form layout='inline' >
            <a-form-item>
                <a-input :value="collectTime" @click="openCalendar" class="hourChangeInput">
                    <img slot="prefix" src="./../assets/images/timer.svg">
                </a-input>
            </a-form-item>
        </a-form>
        <transition name="slide-fade">
            <div class="time-choose-calendar" v-show="isActive">
                <div class="arrow"></div>
                <div class="content">
                    <div class="select-content">
                        <a-input :max="23" v-model="lhour" style="width:70px" @change="lhourChange"/><span>:</span>
                        <a-input :max="59" v-model="lmin" style="width:70px" @change="lminChange"/><span>:</span>
                        <a-input :max="59" v-model="lsec" style="width:70px" @change="lsecChange"/>
                        <div>--</div>
                        <a-input :max="23" v-model="rhour" style="width:70px" @change="rhourChange"/><span>:</span>
                        <a-input :max="59" v-model="rmin" style="width:70px" @change="rminChange"/><span>:</span>
                        <a-input :max="59" v-model="rsec" style="width:70px" @change="rsecChange"/>
                    </div>
                    <div class="clear">
                        <a-button type="primary" @click="selectDate">确定</a-button>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    import moment from 'moment';

    export default {
        name: "hourRange",
        props: ['collectTime'],
        data() {
            return {
                hour_range:'',
                isActive: false,
                lhour:'00',
                lmin:'00',
                lsec:'00',
                rhour:23,
                rmin:59,
                rsec:59,
            }
        },

        computed: {
            classObject: function () {
                return {
                    active: this.isActive
                }
            },
        },
        methods: {
            moment,
            openCalendar() {
                this.isActive = !this.isActive
            },
            
            selectDate() {
                this.lhour>23?this.lhour=23:''
                this.lmin>59?this.lmin=59:''
                this.lsec>59?this.lsec=59:''
                this.rhour>23?this.rhour=23:''
                this.rmin>59?this.rmin=59:''
                this.rsec>59?this.rsec=59:''

                let hour = this.lhour+':'
                    + this.lmin+':'
                    + this.lsec
                    + '-'
                    + this.rhour+':'
                    + this.rmin+':'
                    + this.rsec;
                if (moment(this.lhour + ':' + this.lmin + ':' + this.lsec, 'HH:mm:ss')
                    > moment(this.rhour + ':' + this.rmin + ':' + this.rsec, 'HH:mm:ss')) {
                    this.$message.error('结束时间应晚于开始时间', 1);
                    return
                }
                this.$emit('change', hour);
                this.isActive = false
            },
            lhourChange() {
                if (parseInt(this.lhour) < 10) {
                    this.lhour = '0' + parseInt(this.lhour)
                } else if(parseInt(this.lhour) <= 59) {
                    this.lhour = parseInt(this.lhour)
                } else if (parseInt(this.lhour) > 59) {
                    this.lhour = 59
                }
            },
            lminChange() {
                if (parseInt(this.lmin) < 10) {
                    this.lmin = '0' + parseInt(this.lmin)
                } else if(parseInt(this.lmin) <= 59) {
                    this.lmin = parseInt(this.lmin)
                } else if (parseInt(this.lmin) > 59) {
                    this.lmin = 59
                }
            },
            lsecChange() {
                if (parseInt(this.lsec) < 10) {
                    this.lsec = '0' + parseInt(this.lsec)
                } else if(parseInt(this.lsec) <= 59) {
                    this.lsec = parseInt(this.lsec)
                } else if (parseInt(this.lsec) > 59) {
                    this.lsec = 59
                }
            },
            rhourChange() {
                if (parseInt(this.rhour) < 10) {
                    this.rhour = '0' + parseInt(this.rhour)
                } else if(parseInt(this.rhour) <= 59) {
                    this.rhour = parseInt(this.rhour)
                } else if (parseInt(this.rhour) > 59) {
                    this.rhour = 59
                }
            },
            rminChange() {
                if (parseInt(this.rmin) < 10) {
                    this.rmin = '0' + parseInt(this.rmin)
                } else if(parseInt(this.rmin) <= 59) {
                    this.rmin = parseInt(this.rmin)
                } else if (parseInt(this.rmin) > 59) {
                    this.rmin = 59
                }
            },
            rsecChange() {
                if (parseInt(this.rsec) < 10) {
                    this.rsec = '0' + parseInt(this.rsec)
                } else if(parseInt(this.rsec) <= 59) {
                    this.rsec = parseInt(this.rsec)
                } else if (parseInt(this.rsec) > 59) {
                    this.rsec = 59
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "../assets/scss/mixin.scss";

    .time-select {
        position: relative;
        @include fj(flex-start);

        .ant-input {
            cursor: pointer;
            color: $blue;

            &:read-only {
                border: none;
                background: transparent;
            }

            &:focus {
                border: none;
                -webkit-box-shadow: 0 0 0 0 #fff;
                box-shadow: 0 0 0 0 #fff
            }
        }

        .time-choose-calendar {
            position: absolute;
            top: 42px;
            z-index: 100;

            & > .arrow {
                margin-left: 35px;
                width: 0;
                height: 0;
                border-width: 0 10px 10px;
                border-style: solid;
                border-color: transparent transparent #394047;
            }

            .content {
                @include wh(580px, 150px);
                background-color: #394047;

                & > .select-content {
                    padding: 30px 15px;
                    @include fj(space-between);
                    align-items: center;
                    & > .ant-select {
                        width: 110px
                    }
                }

                .ant-btn {
                    float: right;
                    right: 30px
                }
            }
        }

        .slide-fade-enter-active {
            transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1);
        }

        .slide-fade-leave-active {
            transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1);
        }

        .slide-fade-enter, .slide-fade-leave-to {
            transform: translateY(10px);
            opacity: 0;
        }
    }
</style>